<template>
  <div>
    <el-container>
      <el-header
        ><div style="margin-top: 15px">
          <el-input
            @keyup.enter.native="doAdd"
            v-model="form.name"
            placeholder="请输入内容"
            clearable
          ></el-input>
          <el-button type="info" plain @click="doAdd">新增</el-button>
        </div></el-header
      >
      <el-main>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed type="index" prop="name" label="#" width="50">
          </el-table-column>
          <el-table-column prop="name" label="类别名" width="1050">
            <template slot-scope="scope">
              <div v-if="scope.row.id == edit.id">
                <el-input
                  v-model="edit.name"
                  placeholder="请输入内容"
                  @keyup.enter.native="sureClick"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  style="margin-left: 10px"
                  size="small"
                  @click="sureClick"
                  >保存</el-button
                >
                <el-button type="success" size="small" @click="cancelClick"
                  >取消</el-button
                >
              </div>
              <div v-else>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" @click="doUpdate(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" @click="doDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      form: {},
      input: "",
      edit: {},
    };
  },
  mounted() {
    this.getClassify();
  },
  methods: {
    ...mapActions("classify", [
      "getClassify",
      "addClassify",
      "deleteClassify",
      "updateClassify",
    ]),
    //删除
    async doDelete(id) {
      this.$confirm("此操作将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.deleteClassify({ id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    doUpdate(row) {
      this.edit = { ...row };
    },
    //修改的回车事件
    async sureClick() {
      if (this.edit.name && this.edit.name.trim()) {
        await this.updateClassify(this.edit);
        console.log(this.edit);
        this.edit = {};
      }
    },
    //取消
    cancelClick() {
      this.edit = {};
    },
    //新增
    async doAdd() {
      await this.addClassify(this.form);
      this.form = {};
    },
  },
  computed: {
    ...mapState("classify", ["tableData"]),
  },
};
</script>

<style>
.el-input {
  width: 350px;
}

.el-input .el-input__inner {
  width: 350px;
}

.el-button {
  margin-left: -5px;
}
</style>

<style scoped>
</style>